<template>
	<div class="my-header">
		<view class="bg">
			<image :src="logoWater" mode="widthFix"></image>
		</view>
		<view class="content">
			<view class="flex-box align-items-center" @click="handleClickUser">
				<view class="flex-6">
					<view class="left">
						<image :src="userInfo.avatarUrl || avatarUrl" mode="aspectFit"></image>
					</view>
				</view>
				<view class="flex-12">
					<view class="center">
						<view class="user-name" :class="{'gray':!userInfo.userName}">{{userInfo.userName || '点击登录'}}</view>
						<view class="user-tag" v-if="userInfo.userName">
							<uni-tag v-if="userStatus > 0 " text="学生" type="primary" size="small" circle></uni-tag>
							<uni-tag v-else text="游客" type="default" size="small" circle></uni-tag>
							<uni-tag v-if="userStatus == 1" text="已报名" type="primary" size="small" circle></uni-tag>
							<uni-tag v-else-if="userStatus == 2" text="学习中" type="royal" size="small" circle></uni-tag>
							<uni-tag v-else-if="userStatus == 3" text="已结业" type="warning" size="small" circle></uni-tag>
							<uni-tag v-else-if="userStatus == 4" text="已毕业" type="success" size="small" circle></uni-tag>
							<uni-tag v-else-if="userStatus == 5" text="已停课" type="error" size="small" circle></uni-tag>
						</view>
					</view>
				</view>
				<view class="flex-8" @click.stop="personInfo"> 
					<view class="right" v-if="userInfo.userName" ><text>个人信息</text><uni-icons type="arrowright" size="14" color="#ccc"></uni-icons></view>
				</view>
			</view>
			<view class="flex-box user-info-list" v-if="userInfo.userName">
				<view class="flex-1" v-for="(item,index) in userInfoList" :key="index">
					<view class="number">
						{{item.number}}
					</view>
					<view class="title">
						{{item.title}}
					</view>
					<view class="icon" v-if="item.showIcon">
						<image :src="iconRecommend" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import {
		onLogin
	} from '@/config/login.js'
export default {
	props: {
		small: {
			type: Boolean,
			default: function() {
				return false;
			}
		}
	},
	data() {
		return {
			logoWater:require("@/static/logo-water.png"),
			iconRecommend:require("@/static/icon/icon-recommend.png"),
			avatarUrl:require("@/static/icon/user-def.png"),
			userStatus:3,// 学习状态
		};
	},
	computed: {
		...mapState(['userInfo', 'userInfoList'])
	},
	methods: {
		personInfo(){
				if(this.userStatus > 0){//如果是学生
					this.onPageJump('/subpages/my/studentInfo')
				}else{
					this.onPageJump('/subpages/my/myInfo')
				}
		},
		handleClickUser(){
			//登陆用户手动更新头像用户名信息
			if(this.userInfo.isLogin){
				onLogin('judge', () => {})
			}else{
				this.onPageJump('/subpages/user/loginChange')
			}
		},
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.my-header{
	position: relative;
	min-height: 272px;
	.bg{
		padding-top: 72px;
		height: 166px;
		background-color: $uni-theme-color;
		image{
			width: 448rpx;
			height: 124rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.content{
		position: absolute;
		z-index: 2;
		left: 50%;
		margin-left: -45%;
		top: 100px;
		width: 90%;
		min-height: 119px;
		background-color: white;
		border-radius: 16px;
		box-shadow: 0 2px 16px 0 rgba($color: #000000, $alpha: 0.04);
		padding: 24px;
		.left{
			overflow: hidden;
			width: 128rpx;
			height: 128rpx;
			border: 8rpx solid #F5F5F5;
			border-radius: 64rpx;
			image{
				width: 112rpx;
				height: 112rpx;
			}
		}
		.center{
			.user-name{
				font-size: 18px;
			}
			.user-name.gray{
				// color: $uni-text-color-grey;
			}
			.user-tag{
				uni-tag{
					margin-right: 4px;
				}
			}
		}
		.right{
			font-size: 13px;
			color: $uni-text-color-grey;
		}
		.user-info-list{
			position: relative;
			margin-top: 16px;
			text-align: center;
			.number{
				font-size: 20px;
				font-weight: 600;
				color: $uni-text-color;
			}
			.title{
				font-size: 12px;
				color: $uni-text-color-grey;
			}
			.icon{
				position: absolute;
				right: 0;
				top: -12px;
				z-index: 1;
				image{
					width: 116rpx;
					height: 40rpx;
				}
			}
		}
	}
}
</style>
